import { Text, View } from "@tarojs/components";
import { Arrow } from "@taroify/icons";
import { Button } from "@taroify/core";
import Taro from "@tarojs/taro";
import AllResults from "./components/allResults";

const SelfConclusion: React.FC = () => {
  const result = [
    { type: "检查项数", count: 15 },
    { type: "不符合项数", count: 3 },
    { type: "不适用项数", count: 0 },
  ];
  const options = [
    {
      title: "生产环境条件",
      checkItems: 3,
      nonComplianceItems: 1,
      itemNumber: "1.3",
      notApplicableItems: 0,
    },
    {
      title: "原料情况",
      checkItems: 5,
      nonComplianceItems: 2,
      itemNumber: "2.1",
      notApplicableItems: 1,
    },
    {
      title: "生产过程控制",
      checkItems: 2,
      nonComplianceItems: 0,
      itemNumber: "3.2",
      notApplicableItems: 2,
    },
  ];
  return (
    <View className="w-full h-full flex flex-col">
      {/* 步骤条 */}
      <View className="flex w-full bg-white px-5 py-2">
        <View className="flex w-1/3">
          <View className="w-5 h-5 bg-blue-500 opacity-50 rounded-full text-white flex items-center justify-center">
            1
          </View>
          <Text className="pl-2 flex-nowrap opacity-50">检查填报</Text>
          <Arrow className="pl-2" />
        </View>
        <View className="flex w-1/3">
          <View className="w-5 h-5 bg-blue-500 rounded-full text-white flex items-center justify-center">
            2
          </View>
          <Text className="pl-2 flex-nowrap ">自查结论</Text>
          <Arrow className="pl-2" />
        </View>
        <View className="flex w-1/3">
          <View className="w-5 h-5 bg-blue-500 opacity-50 rounded-full text-white flex items-center justify-center">
            3
          </View>
          <Text className="pl-2 flex-nowrap opacity-50">信息提交</Text>
        </View>
      </View>

      <View className="bg-slate-100">
        {/* 整体检查结果 */}
        <View className="p-3">
          <View className=" text-amber-900 text-base font-semibold pb-2">
            整体检查结果
          </View>
          <View className="flex p-3 bg-white rounded-lg">
            <View className=" mr-6">
              {result.map((item, index) => (
                <View className="pb-2" key={index}>
                  {item.type}
                </View>
              ))}
            </View>
            <View>
              {result.map((item, index) => (
                <View className="pb-2" key={index}>
                  {item.count}
                </View>
              ))}
            </View>
          </View>
        </View>
        {/* 各项检查结果 */}
        <View className="px-3">
          <View className=" text-amber-900 text-base font-semibold pb-3">
            各项检查结果
          </View>
          {options.map((item: any, index: any) => (
            <View>
              <View className="pb-3">
                <AllResults key={index} item={item} index={index} />
              </View>
            </View>
          ))}
        </View>
        {/* 检查人员 */}
        <View className="px-3">
          <View className=" text-amber-900 text-base font-semibold pb-2">
            检查人员
          </View>
          <View className="flex p-3 bg-white rounded-lg h-20"></View>
        </View>

        <View className="flex p-3 gap-3">
          <Button color="primary" className="flex-1">
            暂存
          </Button>
          <Button
            color="primary"
            className="flex-1"
            onClick={() => {
              Taro.navigateTo({
                url: "",
              });
            }}
          >
            确认并下一步
          </Button>
        </View>
      </View>
    </View>
  );
};

export default SelfConclusion;
